<template>
	<div class="my-equipment">
		<custom-header-bar bg="1" title="设备管理" backStatus="1"></custom-header-bar>
		<div class="list">
			<u-swipe-action>
				<u-swipe-action-item class="device-list" @click="delDevice(item)" :options="options1"
					v-for="(item,index) in AppDevice" :key="index">
					<div class="item flex align-center" @click="createBLEConnection(item)">
						<image :src="PictureUrl+'image-watch.png'" class="item-img" alt="" />
						<div class="item-info">
							<div class="name">{{item.nickName||item.name||'--'}}</div>
							<div class="detail">型号: {{item.equipmentModel||'--'}} 蓝牙地址：{{item.deviceId||'--'}}
							</div>
							<div class="detail">电量：{{item.electric||'--'}}%</div>
						</div>
						<div class="status" v-if="item.state==='link'">已连接</div>
						<div class="status" v-if="item.state==='ing'">连接中...</div>
					</div>
				</u-swipe-action-item>
			</u-swipe-action>
			<div class="add flex align-center justify-between" @click="addDevice">
				<div class="flex align-center">
					<image src="/static/my-add.png" class="add-icon" alt="" />
					<span style="color: #484848; font-size: 36upx">添加新设备</span>
				</div>
				<image :src="PictureUrl+'my-equipment.png'" class="equipment-img" alt="" />
			</div>
		</div>
		<u-popup round="18" :show="tipshow" mode="center">
			<view class="popup-model-wrapper">
				<div class="title">
					<image class="image" src="/static/icon-warning-orange.png"></image>
					<div class="text">连接提示</div>
				</div>
				<div class="content">
					确定连接该设备吗？
				</div>
				<div class="operate-wrapper">
					<button border="bottom" class="button del" @click="tipshow=false">取消</button>
					<button border="bottom" class="button confirm" @click="popupConfirm">确定</button>
				</div>
			</view>
		</u-popup>
		<u-popup :overlayOpacity="0.6" :round="10" mode="center" :show="addShow">
			<div class="out-popup-box">
				<div class="tips-title flex align-center">
					<image src="/static/icon-warning.png" class="warning-icon" alt="" />
					<span>新增设备提示</span>
				</div>
				<div class="tips-text">完善信息后才可以添加设备</div>
				<div class="tips-bototm flex align-center justify">
					<button class="tips-cancle" @click="addShow = false">取消</button>
					<button class="tips-confirm" @click="handleClickUpgrade">去升级</button>
				</div>
			</div>
		</u-popup>
	</div>

</template>
<script>
	import storage from "@/utils/storage.js"
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex"
	import {
		InitBlueTooth,
		CreateBlueToothConnection,
		ReadBlueTooth,
		closeDevice
	} from "@/utils/BLE.js"
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		UpdateDevice
	} from "@/api/device.js"

	export default {
		components: {
			CustomHeaderBar,
		},
		data() {
			return {
				tipshow: false,
				options1: [{
					text: "解除绑定",
					style: {
						backgroundColor: "#F75755",
					},
				}, ],
				userInfo: {},
				addShow: false
			};
		},
		onShow() {
			this.ActionDeviceList()
		},
		computed: {
			...mapGetters(['AppDevice', 'PictureUrl', 'UserInfo']),
		},
		onLoad() {
			this.userInfo = storage.getUserInfo();
		},
		methods: {
			...mapMutations(['SetCurrentLinkDevice']),
			...mapActions(['WriteBlueTooth', 'ActionBlueBodyInfo', 'ActionCurrentLink', 'ActionBuleList',
				'ActionDeviceList',
				'SetupCurrentDeviceState'
			]),
			/**
			 * 添加设备页面  蓝牙列表页面
			 * */
			addDevice() {
				if (this.userInfo.utype == 1) {
					this.addShow = true
					return
				}
				uni.navigateTo({
					url: "/pages/bluetooth/bluetooth"
				})
			},
			delDevice(item) {
				if (this.UserInfo.utype === 1) {
					uni.showToast({
						title: "您没有权限删除该设备",
						icon: "none"
					})
					return
				} else {
					if (item.state === 'ing') {
						uni.showToast({
							title: "该设备正在连接中...",
							icon: "none"
						})
						return
					}
					if (item.state === 'link') {
						closeDevice(item.deviceId)
						this.SetupCurrentDeviceState('')
					}
					UpdateDevice({
						deviceId: item.deviceId,
						delFlag: 2,
						relieveTimeDate: new Date(),
					}).then((res) => {
						let device = storage.getCurrentDevice()
						if (device && device.deviceId && device.deviceId === item.deviceId) {
							storage.removeCurrentDevice()
							this.ActionCurrentLink('')
						}
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						this.ActionDeviceList()
					})
				}
			},
			popupConfirm() {
				this.tipshow = false
				let that = this
				if (this.UserInfo.utype === 1) {
					uni.showToast({
						title: "您没有权限连接该设备",
						icon: "none"
					})
				} else {
					InitBlueTooth(this.device).then(() => {
						that.SetupCurrentDeviceState({
							...this.device,
							state: 'ing'
						})
						console.log("创建连接----设备列表页面")
						CreateBlueToothConnection(this.device).then((res) => {
							console.log('连接的设备：', res)
							// -------设置当前设备---------
							that.currentDivice = {
								deviceId: res.device.deviceId,
								name: res.device.name,
								serviceId: res.service.uuid,
								characteristicId: res.c.uuid,
								state: 'link'
							}
							// ----------------
							that.SetupCurrentDeviceState(that.currentDivice, that)
							ReadBlueTooth(res.device, res.service, res.c)
							setTimeout(() => {
								this.WriteBlueTooth('baseinfo')
								// 同步时间
								// WriteBlueTooth('time')
								// 获取设备电量
								this.WriteBlueTooth('electric')
								// 一件测量
								// this.WriteBlueTooth('test')
								// 同步数据
								this.WriteBlueTooth('tongbu')
							}, 3000)
						}, (res) => {
							uni.showToast({
								title: "无法连接此设备",
								icon: "none"
							})
							that.SetupCurrentDeviceState({
								...this.device,
								state: 'no'
							})
						})
					})
				}
			},
			// 创建蓝牙连接，连接蓝牙
			createBLEConnection(item) {
				if (this.UserInfo.utype === 1) {
					this.SetupCurrentDeviceState({
						...item,
						state: 'link'
					})
					return
				}
				if (item.state === 'link' || item.state === 'ing') return
				this.tipshow = true
				this.device = item
			},
			handleClickUpgrade() {
				this.upgradeShow = false
				uni.navigateTo({
					url: "/pages/moduleLogin/info/info?phone=" + this.userInfo.uphone,
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.u-page {
		padding: 0;
	}

	.u-swipe-action {
		border-radius: 30upx;
		overflow: hidden;
		margin-bottom: 24upx;
	}

	.my-equipment {
		height: 100%;
		box-sizing: border-box;
		padding-top: 160upx;
		background-color: #f4f4f4;

		.list {
			box-sizing: border-box;
			padding: 24upx;

			.device-list {
				margin-bottom: 24upx;
				border-radius: 30upx;
			}

			.u-swipe-action-item {
				margin-bottom: 24upx;
			}

			.item {
				padding: 40upx 25upx;
				background-color: #fff;
				border-radius: 30upx;
				position: relative;

				.item-img {
					flex: 0 0 93upx;
					width: 93upx;
					height: 142upx;
					margin-right: 10upx;
				}

				.name {
					color: #484848;
					font-size: 36upx;
				}

				.detail {
					color: rgba(0, 0, 0, 0.65);
					font-size: 28upx;
					margin-top: 12upx;
				}

				.status {
					position: absolute;
					top: 40upx;
					right: 25upx;
					width: 120upx;
					line-height: 50upx;
					text-align: center;
					background: #e4fff9;
					color: #33ccac;
					font-size: 28upx;
				}
			}

			.add {
				height: 208upx;
				background-color: #fff;
				border-radius: 30upx;
				padding-left: 42upx;
				padding-right: 62upx;

				.add-icon {
					width: 40upx;
					height: 40upx;
					margin-right: 8upx;
				}

				.equipment-img {
					width: 112upx;
					height: 146upx;
				}
			}
		}
	}

	.popup-model-wrapper {
		width: 420upx;
		border-radius: 30upx;
		padding: 40upx;
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			.image {
				margin-right: 24upx;
				width: 52upx;
				height: 52upx;
			}

			.text {
				font-size: 34upx;
				color: #000000CC;
			}
		}

		.content {
			margin-top: 50upx;
			text-align: center;
			color: #666666FF;
			font-size: 26upx;
		}

		.operate-wrapper {
			margin-top: 56upx;
			display: flex;
			justify-content: space-around;

			.button {
				width: 150upx;
				height: 60upx;
				line-height: 60upx;
				font-size: 28upx;
				border-radius: 4upx
			}

			.del {
				background: #EBEDF0FF;
				color: #BFBEBEFF;
			}

			.confirm {
				background: #61D7CAFF;
				color: #FFFFFFFF;
			}
		}
	}

	.out-popup-box {
		width: 416upx;
		padding: 0 40upx;
		padding-top: 65upx;
		padding-bottom: 50upx;
		box-sizing: border-box;
	}

	.tips-title {
		justify-content: center;

		span {
			font-size: 34upx;
			color: rgba(0, 0, 0, 0.8);
			margin-left: 20upx;
		}

		.warning-icon {
			width: 52upx;
			height: 52upx;
		}
	}

	.tips-text {
		font-size: 26upx;
		color: #666;
		margin-top: 55upx;
	}

	.tips-bototm {
		margin-top: 60upx;

		.tips-cancle,
		.tips-confirm {
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			font-size: 26upx;
		}

		.tips-cancle {
			background-color: #ebedf0;
			color: #bfbebe;
		}

		.tips-confirm {
			background-color: #61d7ca;
			color: #fff;
			margin-left: 16upx;
		}
	}
</style>
